<template>
  <div >
    <Swipe :style="styles" v-bind="{...props.schema}">
      <SwipeItem  v-for="(item,index) in props.schema.value">
        <img style='width: 100%'  :src="item" />
      </SwipeItem>
    </Swipe>
  </div>

</template>



<script lang="ts" setup>
/**
 * h5 图片轮播图组件
 */
import { Swipe, SwipeItem } from 'vant';
import {watch,computed} from 'vue'
import util from "@/utils/util"
const props = defineProps({
  schema: {
    type: Object,
    default: () => ({}),
  },
});
const styles=computed(()=>{
  let result={
    display: "flex",
  }
  if(props.schema){
    for(let key in props.schema){
      if(key.indexOf("styles.")!=-1){
        let n_key=key.replaceAll("styles.","");
        let value=props.schema[key];
        if(n_key.indexOf("padding-")!=-1){
          // value+="px";
          value+="px"
        }
        result[n_key]=value;
      }
    }

    for(let p_key in props.schema.componentProps){
      for(let v_key in props.schema){
        if(!props.schema[p_key]){
          props.schema[p_key]=props.schema.componentProps[p_key];
        }
      }
    }
  }
  console.log("---轮播图:",props.schema)
  // console.log("---result::",result)
  return result;

});

function getUnit(){
  // return props.schema.unit?props.schema.unit:props.schema.componentProps.unit
  return "px"
}


</script>

<style scoped>

</style>
